<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		html,body{
			width:100%;
			height:100%;
		}
		#service {
			width: 100%;
			height: 100%;
			background: rgba(255,255,255,.1);
		}
		.bg {
			width: 100%;
			height:100%;
			/*background: url(../2.png);*/
			background-size: cover;
		}
		.service {
		}
		.label-content {
			display: none;
		}
		.hide {
			opacity:0;
		}
		.cir {
			display: none;
		}
		.second-circle,.third-circle {
			stroke-dasharray:2000;
    		stroke-dashoffset:2000;
    		-webkit-stroke-dasharray:2000;
    		-webkit-stroke-dashoffset:2000;
    		-moz-stroke-dasharray:2000;
    		-moz-stroke-dashoffset:2000;
    		-o-stroke-dasharray:2000;
    		-o-stroke-dashoffset:2000;
    		-ms-stroke-dasharray:2000;
    		-ms-stroke-dashoffset:2000;
		}
		.circle1,.circle2,.circle3,.circle4,.circle5,.circle6,.circle7 {
			stroke-dasharray:500;
    		stroke-dashoffset:500;
    		-webkit-stroke-dasharray:500;
    		-webkit-stroke-dashoffset:500;
    		-moz-stroke-dasharray:500;
    		-moz-stroke-dashoffset:500;
    		-o-stroke-dasharray:500;
    		-o-stroke-dashoffset:500;
    		-ms-stroke-dasharray:500;
    		-ms-stroke-dashoffset:500;
		}
		.all-label {
			opacity: 0;
		}
		/*.all-label {
			opacity: 1;
		}*/
		.move-circle {
			transform: rotate(0);
			transform-origin: 920px 410px;
			/*animation: zhuan 4s linear infinite;
			-webkit-animation: zhuan 4s linear infinite;
			-moz-animation: zhuan 4s linear infinite;
			-o-animation: zhuan 4s linear infinite;*/
		}
		@keyframes zhuan {
			100% {
				transform: rotate(360deg);
				transform-origin: 920px 410px;
			}
		@-webkit-keyframes zhuan {
		100% {
			transform: rotate(360deg);
			transform-origin: 920px 410px;
		}
		@-moz-keyframes zhuan {
			100% {
				transform: rotate(360deg);
				transform-origin: 920px 410px;
		}
		@-o-keyframes zhuan {
			100% {
				transform: rotate(360deg);
				transform-origin: 920px 410px;
		}
	</style>
</head>
<body>
	<div class="bg">
		<svg id="service" viewBox="0,0,1860,856" class="service">
			<defs></defs>
			<g class="wrapper">
			<rect x="0" y="0" width="490" height="856"	fill="#fff" />
			<rect x="1400" y="0" width="670" height="856" fill="#fff" />
			<path d="M490 0L700 0L490 370" fill="#fff" ></path>
			<path d="M490 856L900 856L490 650" fill="#fff" ></path>
			<path d="M490 856L1400 856L1400 690" fill="#fff" ></path>
			<path d="M1200 0L1400 0L1400 350"  fill="#fff"></path>
			<!-- <rect x="920 " y="420" width="2" height="2"	fill="#000" /> -->
			<g class='circle-wrapper'>
				<g>
					<path d="M872 235A175 175 0 0 1 1050 280" stroke="#c3daf5" fill="none" stroke-width="2" class="circle1"/>
					<path d="M1050 280A175 175 0 0 1 1105 420" stroke="#c3daf5" fill="none" stroke-width="2" class="circle2"/>
					<path d="M1105 420A175 175 0 0 1 1050 540" stroke="#c3daf5" fill="none" stroke-width="2" class="circle3"/>
					<path d="M1050 540A175 175 0 0 1 910 592" stroke="#c3daf5" fill="none" stroke-width="2" class="circle4"/>
					<path d="M910 592A175 175 0 0 1 778 518" stroke="#c3daf5" fill="none" stroke-width="2" class="circle5"/>
					<path d="M778 518A175 175 0 0 1 745 368" stroke="#c3daf5" fill="none" stroke-width="2" class="circle6"/>
					<path d="M745 368A175 175 0 0 1 870 236" stroke="#c3daf5" fill="none" stroke-width="2" class="circle7"/>
				</g>
				<g class="small-cir">
					<g class="cir1 hide-cir">
						<circle cx="872" cy="235" r="15" stroke="#aaa" stroke-width="1" fill="none"/>
						<circle cx="872" cy="235" r="8"  fill="#000"/>
					</g>
					<g class="cir1 ">
						<circle cx="872" cy="235" r="15" stroke="#aaa" stroke-width="1" fill="none"/>
						<circle cx="872" cy="235" r="8"  fill="#000"/>
						<!-- <animateMotion path="M0 0A160 160 0 0 1 180 45" begin="0s" dur="0.5s" fill="freeze"/> -->
					</g>	
					<g class="cir2 hide">
						<circle cx="1057" cy="287" r="15" stroke="#aaa" stroke-width="1" fill="none"/>
						<circle cx="1057" cy="287" r="8"  fill="#000"/>
						<!-- <animateMotion path="M0 0A160 160 0 0 1 48 128" begin="0.5s" dur="0.5s" fill="freeze"/> -->
					</g>
					<g class="cir3 hide">
						<circle cx="1105" cy="428" r="15" stroke="#aaa" stroke-width="1" fill="none"/>
						<circle cx="1105" cy="428" r="8"  fill="#000"/>
						<!-- <animateMotion path="M0 0A160 160 0 0 1 -55 112" begin="1s" dur="0.5s" fill="freeze"/> -->
					</g>
					<g class="cir4 hide">
						<circle cx="1050" cy="540" r="15" stroke="#aaa" stroke-width="1" fill="none"/>
						<circle cx="1050" cy="540" r="8"  fill="#000"/>
						<!-- <animateMotion path="M0 0A160 160 0 0 1 -135 50" begin="1.5s" dur="0.5s" fill="freeze"/> -->
					</g>
					<g class="cir5 hide">
						<circle cx="915" cy="590" r="15" stroke="#aaa" stroke-width="1" fill="none"/>
						<circle cx="915" cy="590" r="8"  fill="#000"/>
						<!-- <animateMotion path="M0 0A160 160 0 0 1 -135 -70" begin="2s" dur="0.5s" fill="freeze"/> -->
					</g>
					<g class="cir6 hide">
						<circle cx="780" cy="520" r="15" stroke="#aaa" stroke-width="1" fill="none"/>
						<circle cx="780" cy="520" r="8"  fill="#000"/>
						<!-- <animateMotion path="M0 0A160 160 0 0 1 -35 -150" begin="2.5s" dur="0.5s" fill="freeze"/> -->
					</g>
					<g class="cir6 hide">
						<circle cx="745" cy="370" r="15" stroke="#aaa" stroke-width="1" fill="none"/>
						<circle cx="745" cy="370" r="8"  fill="#000"/>
						<!-- <animateMotion path="M0 0A160 160 0 0 1 128 -135" begin="3s" dur="0.5s" fill="freeze"/> -->
					</g>
				</g>
			</g>
				<g>
					<path d="M844 271A161 161 15 1 0 1055 504" stroke="#000" fill="none" stroke-width="6" class="second-circle"/>
						<animateMotion  transform="rotate(10,200,100)" begin="3.5s" dur="0.5s" fill="none"/>
					</path>
					<path d="M801 332A147 151 0 0 1 1045 333" stroke="#000" fill="none" stroke-width="6" class="third-circle"/>
				</g>
				<circle cx="923" cy="410" r="133" stroke="#c3daf5" stroke-width="1" fill="none" class="hide forth-circle"/>
				<circle cx="924" cy="410" r="120" stroke="#74aaeb" stroke-width="16" fill="none" class="hide fifth-circle"/>
				<g class="rec-wrap">
					<line x1="875" y1="340" x2="867" y2="327" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="897" y1="330" x2="891" y2="315" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="922" y1="327" x2="922" y2="311" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="922" y1="326" x2="922" y2="311" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="944" y1="327" x2="947" y2="313" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="964" y1="336" x2="971" y2="322" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="980" y1="347" x2="990" y2="334" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="992" y1="360" x2="1004" y2="350" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="1000" y1="376" x2="1014" y2="370" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="1008" y1="392" x2="1022" y2="390" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="1008" y1="411" x2="1024" y2="411" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="1008" y1="429" x2="1023" y2="432" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="1002" y1="449" x2="1015" y2="455" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="988" y1="469" x2="997" y2="479" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="970" y1="484" x2="978" y2="496" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="949" y1="494" x2="954" y2="507" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="922" y1="496" x2="923" y2="510" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="901" y1="494" x2="898" y2="508" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="882" y1="484" x2="875" y2="498" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="867" y1="474" x2="857" y2="485" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="856" y1="460" x2="843" y2="468" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="846" y1="445" x2="832" y2="450" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="840" y1="428" x2="826" y2="432" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="838" y1="412" x2="824" y2="410" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="840" y1="393" x2="826" y2="390" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="846" y1="375" x2="833" y2="370" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="846" y1="375" x2="833" y2="370" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
					<line x1="860" y1="355" x2="848" y2="345" style="stroke:#74aaeb;stroke-width:5" class="hide"/>
				</g>
					<image xlink:href="../img/service/people.png" x="879" y="354" height="111px" width="93px" class="hide people"/>
				<g>
					<image xlink:href="../img/service/1/1.png" x="612" y="71" height="122px" width="187px" class="label first-label"/>
					<image xlink:href="../img/service/2/01.png" x="600" y="60" height="195px" width="524px" class="label-content"/>
				</g>
				<g class="all-label">
					<image xlink:href="../img/service/1/2.png" x="1058" y="64" height="122px" width="181px" class="label"/>
					<image xlink:href="../img/service/2/02.png" x="758" y="52" height="195px" width="493px" class="label-content"/>
				</g>
				<g class="all-label">
					<image xlink:href="../img/service/1/4.png" x="1185" y="294" height="122px" width="187px" class="label"/>
					<image xlink:href="../img/service/2/04.png" x="885" y="280" height="195px" width="500px" class="label-content"/>
				</g>
				<g class="all-label">
					<image xlink:href="../img/service/1/7.png" x="1120" y="588" height="122px" width="128px" class="label"/>
					<image xlink:href="../img/service/2/07.png" x="820" y="578" height="195px" width="436px" class="label-content"/>
				</g>
				<g class="all-label">
					<image xlink:href="../img/service/1/6.png" x="827" y="680" height="122px" width="188px" class="label"/>
					<image xlink:href="../img/service/2/06.png" x="527" y="670" height="195px" width="500px" class="label-content"/>
				</g>
				<g class="all-label">
					<image xlink:href="../img/service/1/5.png" x="510" y="583" height="122px" width="191px" class="label"/>
					<image xlink:href="../img/service/2/05.png" x="500" y="570" height="195px" width="526px" class="label-content"/>
				</g>	
				<g class="all-label">
					<image xlink:href="../img/service/1/3.png" x="505" y="304" height="122px" width="131px" class="label"/>
					<image xlink:href="../img/service/2/03.png" x="505" y="296" height="195px" width="460px" class="label-content nx"/>
				</g>

			</g>
		</svg>
	</div>
	<script src="js/jquery-3.2.1.min.js"></script>
	
</body>
</html>